<template>
  <!-- linearGradient元素用来定义线性渐变，用于图形元素的填充或描边。 -->
  <linearGradient v-if="type === 'linear'" :id="id" x1="0%" y1="0%" x2="100%" y2="0%"
    :gradientTransform="`rotate(${rotate}, 0.5, 0.5)`">
    <stop offset="0%" :stop-color="color1"></stop>
    <stop offset="100%" :stop-color="color2"></stop>
  </linearGradient>
  <!-- radialGradient元素用来定义径向渐变，以对图形元素进行填充或描边。 -->
  <radialGradient :id="id" v-else>
    <stop offset="0%" :stop-color="color1" />
    <stop offset="100%" :stop-color="color2" />
  </radialGradient>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

// eslint-disable-next-line no-undef
defineProps({
  id: {
    type: String,
    required: true
  },
  type: {
    type: String as PropType<'linear' | 'radial'>
  },
  color1: {
    type: String,
    required: true
  },
  color2: {
    type: String,
    required: true
  },
  rotate: {
    type: Number,
    default: 0
  }

})
</script>